<template>
  <div v-if="list != {}" class="app-container">
    <!-- 补贴单信息 -->
    <h5 class="titleInfo">补贴单信息</h5>
    <el-form ref="list" :inline="true" label-width="130px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="补贴单号">
            <span v-if="listdata" class="spanToInput">{{
              listdata.applySn | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
                    <el-form-item label="流水单号">
                        <span class="spanToInput">{{list.orderSn | filterNull}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="预约单号">
                        <span class="spanToInput">{{list.projectOrderSn | filterNull}}</span>
                    </el-form-item>
        </el-col>-->
        <el-col :span="8">
          <el-form-item label="预约医院">
            <span v-if="listdata" class="spanToInput">{{
              listdata.hospitalName | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="预约项目">
            <span v-if="listdata" class="spanToInput">{{
              listdata.projectName | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建日期">
            <span v-if="listdata.createdAtStr" class="spanToInput">{{
              listdata.createdAtStr | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="流水时间">
            <span v-if="listdata.projectOrder" class="spanToInput">{{
              listdata.projectOrder.createdAtStr | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单数">
            <span class="spanToInput">{{ list.count | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否全额">
            <span class="spanToInput">{{ list.isFull | isFull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="已使用全款金额" v-if="list.count == 1">
            <span class="spanToInput">{{
              list.discountAmount | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <!-- 2020新增 -->
        <el-col :span="8" v-if="listdata.projectOrder">
          <el-form-item label="活动名称">
            {{ listdata.projectOrder.salesTypeValue }}
            <!--    <span class="spanToInput" v-if=" listdata.projectOrder.salesType=='0'">无促销活动</span>
               <span class="spanToInput" v-if=" listdata.projectOrder.salesType==2020">湖北2020定金全额补</span>-->
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 人员信息 -->
    <div class="divBar" />
    <h5 class="titleInfo">人员信息</h5>
    <el-form ref="list" :inline="true" :model="list" label-width="130px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="客户姓名">
            <span v-if="listdata.user" class="spanToInput">{{
              listdata.user.realname || null | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户手机号">
            <span v-if="listdata.user" class="spanToInput">{{
              listdata.user.username | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="推荐人姓名">
            <span v-if="listdata.server" class="spanToInput">{{
              listdata.server.realname || null | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="推荐人手机号">
            <span v-if="listdata.server" class="spanToInput">{{
              listdata.server.username | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="管家姓名">
            <span v-if="listdata.butler" class="spanToInput">{{
              listdata.butler.realname || null | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="管家手机号">
            <span v-if="listdata.butler" class="spanToInput">{{
              listdata.butler.username | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="用户角色">
            <span v-if="listdata">
              <span v-if="listdata.role" class="spanToInput">
                <span>{{ listdata.role.roleName | filterNull }}</span>
              </span>
              <span v-else class="spanToInput">暂无</span>
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="加盟时间">
            <span v-if="listdata" class="spanToInput">
              <span v-if="listdata.user">{{
                listdata.user.joinTime | filterNull
              }}</span>
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="考核">
            <span v-if="listdata" class="spanToInput">{{
              list.isCheck == 1 ? "需要考核" : "无需考核"
            }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 补贴信息 -->
    <div v-if="list.disableAllowanceInfoDisplay != 1">
      <div class="divBar" />
      <h5 class="titleInfo">
        补贴信息
        <!-- {{listdata.role.roleId}} -->
        <span v-if="listdata.role">
          <el-button
            v-if="listdata.role.roleId == '2'"
            style="margin-left:30px"
            size="mini"
            type="primary"
            @click="dialogResults = true"
            >每月业绩</el-button
          >
        </span>
      </h5>
      <!-- 每月业绩弹窗 -->
      <el-dialog title="每月业绩" :visible.sync="dialogResults" width="468px">
        <template>
          <el-table :data="tableData" border style="width:432px">
            <el-table-column prop="ym" label="月份" width="216" />
            <el-table-column prop="achive" label="业绩" />
          </el-table>
        </template>
      </el-dialog>

      <el-form ref="list" :inline="true" :model="list" label-width="130px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="扣除杂费">
              <span class="spanToInput">{{ list.allPrice | filterNull }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="杂费金额">
              <span class="spanToInput">{{
                list.otherAllowance | filterNull
              }}</span>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="奖励金额">
              <span class="spanToInput">{{ list.referee | filterNull }}</span>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="6">
            <el-form-item v-if="listdata.projectOrder" label="现金补贴">
              <span class="spanToInput">{{ listdata.projectOrder.cashAllowance | filterNull }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item v-if="listdata.projectOrder" label="积分补贴">
              <span class="spanToInput">{{ listdata.projectOrder.integralAllowance | filterNull }}</span>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="消费金额">
              <span class="spanToInput">{{
                list.totalMoney | filterNull
              }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="补贴金额">
              <span class="spanToInput">{{ list.money | filterNull }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="金币补贴">
              <span class="spanToInput" v-if="list.protocol"
                >{{ list.protocol.smallCoin || 0 }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="期数/次">
              <span class="spanToInput">{{ list.coinNum | filterNull }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银币补贴">
              <span class="spanToInput" v-if="list.protocol">
                {{ list.protocol.smallCredit | filterNull }}</span
              >
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="期数/次">
              <span class="spanToInput">{{ list.creditNum | filterNull }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="共补贴期数">
              <span class="spanToInput">{{ list.applyNum | filterNull }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="流水单备注">
              <span class="spanToInput" v-if="listdata.projectOrder">{{
                listdata.projectOrder.userRemark
              }}</span>
            </el-form-item>
          </el-col>
          <!--   <el-col :span="12">
            <el-form-item label="现金补贴">
              <span class="spanToInput">{{ list.cashAllowance | filterNull }}</span>
            </el-form-item>
          </el-col>
         <el-col :span="12">
            <el-form-item label="积分补贴">
              <span class="spanToInput">{{ list.integralAllowance | filterNull }}</span>
            </el-form-item>
          </el-col>-->
          <el-col :span="12">
            <el-form-item label="补贴单备注">
              <span class="spanToInput">{{ list.remark | filterNull }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="list" label="首次补贴">
              <span class="spanToInput">{{
                list.allowanceTimeStr | filterNull
              }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 图片信息 -->
    <div class="divBar" />
    <h5 class="titleInfo">图片信息</h5>
    <el-form ref="list" :inline="true" :model="list" label-width="130px">
      <el-row>
        <el-col :span="24">
          <el-form-item v-if="listdata.img4List" label="消费图片">
            <div v-if="listdata.img4List.length > 0" class="imgList_pic">
              <img
                v-for="(item, index) in listdata.img4List"
                :key="index"
                :src="item ? imgUrlPrefix + item : ''"
                alt
              />
            </div>
            <div v-else>
              <span class="spanToInput">暂无</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item v-if="listdata.img5List" label="前后图片">
            <div v-if="listdata.img5List.length > 0" class="imgList_pic">
              <img
                v-for="(item, index) in listdata.img5List"
                :key="index"
                :src="item ? imgUrlPrefix + item : ''"
                alt
              />
            </div>
            <div v-else>
              <span class="spanToInput">暂无</span>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 协议信息 -->
    <div class="divBar" />
    <h5 class="titleInfo">协议信息</h5>
    <el-form ref="list" :inline="true" :model="list" label-width="150px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="乙方">
            <!-- <span
              v-if="list.protocol"
              class="spanToInput"
            >{{list.protocol.realname||null | filterNull}}</span>-->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系方式">
            <span v-if="list.protocol" class="spanToInput">{{
              list.protocol.username | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证">
            <span v-if="list.protocol" class="spanToInput">{{
              list.protocol.identity | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="地址">
            <span v-if="list.protocol" class="spanToInput">{{
              list.protocol.address | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="消费总金额(小写)">
            <span v-if="list.protocol" class="spanToInput">{{
              list.protocol.consumeSmallPrice | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="奖励总金银币(小写)">
            <span v-if="list.protocol" class="spanToInput">{{
              list.protocol.rewardSmallPrice | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="杂费合计金额(小写)">
            <span v-if="list.protocol" class="spanToInput">{{
              list.protocol.otherSmallPrice | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="消费总金额(大写)">
            <span v-if="list.protocol" class="spanToInput">{{
              list.protocol.consumeBigPrice | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="奖励总金银币(大写)">
            <span v-if="list.protocol" class="spanToInput">{{
              list.protocol.rewardBigPrice | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="杂费合计金额(大写)">
            <span v-if="list.protocol" class="spanToInput">{{
              list.protocol.otherBigPrice | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="金币(小写)">
            <span v-if="list.protocol" class="spanToInput">{{
              list.protocol.smallCoin || 0
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="银币(小写)">
            <span v-if="list.protocol" class="spanToInput">{{
              list.protocol.smallCredit | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="金币(大写)">
            <span v-if="list.protocol" class="spanToInput">{{
              list.protocol.bigCoin | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="银币(大写)">
            <span v-if="list.protocol" class="spanToInput">{{
              list.protocol.bigCredit | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="第一次奖励时间">
            <span v-if="list.protocol" class="spanToInput">{{
              list.protocol.sendYsendMsendD | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="乙方消费时间">
            <span v-if="list.protocol" class="spanToInput">{{
              list.protocol.consumeYconsumeMconsumeD | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="乙方消费医院">
            <span v-if="list.protocol" class="spanToInput">{{
              list.protocol.consumeHospital | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="乙方手术时间">
            <span v-if="list.protocol" class="spanToInput">{{
              list.protocol.operationYoperationMoperationD | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="甲方签名时间">
            <span v-if="list.protocol" class="spanToInput">{{
              list.protocol.firstSignYfirstSignMfirstSignD | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="乙方签名时间">
            <span v-if="list.protocol" class="spanToInput">{{
              list.protocol.secondSignYsecondSignMsecondSignD | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <el-button
              style="margin-top:30px;margin-left:130px"
              type="primary"
              @click="dialogAudit = true"
              >审核</el-button
            >
          </el-form-item>
        </el-col>
        <!-- 审核弹窗 -->
        <el-dialog title="审批" :visible.sync="dialogAudit" width="468px">
          <!-- 输入框 -->
          <el-form :inline="true" label-width="80px" label-position="right">
            <el-col :span="24">
              <el-form-item label="初审状态">
                <el-select v-model="form.applyStatus" placeholder="请选择">
                  <el-option
                    v-for="item in applyStatusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="审批意见">
                <el-input
                  v-model="form.remark"
                  type="textarea"
                  :rows="6"
                  style="width:236px"
                  placeholder="请输入审批意见"
                />
              </el-form-item>
            </el-col>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="auditClose()">取 消</el-button>
            <el-button type="primary" @click="auditSubmit()">确 定</el-button>
          </span>
        </el-dialog>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { audit, dealAudit } from "@/api/subsidyManage";
export default {
  name: "SubsidyManageTrial",
  filters: {
    filterNull(e) {
      if (!e) {
        return "暂无";
      } else {
        return e;
      }
    },
    cardNull(e) {
      return window.helper.cardType(e);
    },
    userFocus(e) {
      return window.helper.userFocus(e);
    },
    isFull(e) {
      if (e == 1) {
        return "是";
      }
      if (e == 0) {
        return "否";
      }
    }
  },
  data() {
    return {
      imgUrlPrefix: localStorage.getItem("imgUrlPrefix"),
      val: "1",
      userId: "",
      applyStatusOptions: [
        {
          value: 1,
          label: "通过"
        },
        {
          value: 2,
          label: "不通过"
        }
      ],
      list: {},
      listdata: {},
      form: {
        applyStatus: 1,
        firstDate: "",
        coin: "",
        credit: "",
        allowanceMoney: "",
        id: null,
        applyNum: "",
        eachCoinNum: "",
        eachCreditNum: "",
        count: "",
        discountAmount: "",
        protocol: {},
        remark: ""
      },
      dialogResults: false,
      dialogAudit: false,
      tableData: []
    };
  },
  inject: ["reload"],
  created() {
    this.userId = String(this.$route.query.id)
    this.getList()
  },
  methods: {
    // 审批取消
    auditClose() {
      this.dialogAudit = false;
      console.log("审核取消");
    },
    // 审批确定
    auditSubmit() {
      this.dialogAudit = false;
      const tf = this.form;
      const tl = this.list;
      tf.firstDate = tl.data.operationTimeStr;
      tf.coin = tl.cashAllowance;
      tf.credit = tl.integralAllowance;
      tf.allowanceMoney = tl.money;
      tf.id = Number(this.userId);
      tf.applyNum = tl.applyNum;
      tf.eachCoinNum = tl.coinNum;
      tf.eachCreditNum = tl.creditNum;
      tf.count = tl.count;
      tf.discountAmount = tl.discountAmount;
      console.log(this.form);
      const datas = this.form;
      dealAudit(datas)
        .then(res => {
          if (!res.data.code) {
            this.$router.push("/subsidyManageIndex");
            this.reload();
            console.log(res);
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(error => {
          this.$message.error(error);
        });
      // console.log("审批确定")
    },
    getList() {
      const datas = { id: this.userId };
      audit(datas)
        .then()
        .then(res => {
          console.log(res);
          if (res.data.code == 0) {
            this.list = {};
            this.list = res.data.data;
            this.listdata = res.data.data.data;
            this.list = JSON.parse(JSON.stringify(this.list));
            this.listdata = JSON.parse(JSON.stringify(this.listdata));
            console.log(this.list);
            this.form.protocol = res.data.data.protocol;
            this.tableData = res.data.data.data.achievements;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(error => {
          this.$message.error(error);
        });
      // console.log(JSON.stringify(this.form))
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 0px !important;
}
.form {
  margin-left: 268px;
}
.imgList_pic {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.imgList_pic img {
  width: 200px;
  height: auto;
  margin: 10px;
}
</style>
